<template>
  <div class="date-box">
    <el-select 
      class="list-box" 
      v-model="dateType" 
      placeholder="请选择"
      @change="selectDateType">
      <el-option
        v-for="item in dateTypeList"
        :key="item.value"
        :label="item.name"
        :value="item.value">
      </el-option>
    </el-select>
    <div :class="['calendar-box',dateType != 0?'disabled':'']" @click="showCalendar">
      <div class="icon-calendar"></div>
      <div class="date">{{date[0]}}</div>
      <div>-</div>
      <div class="date">{{date[1]}}</div>
    </div>
    <van-calendar 
      color="#409EFF" 
      v-model="show" 
      type="range" 
      @confirm="onConfirm"  
      :show-confirm="false"
      :min-date="minDates" 
      :max-date="maxDates"
      :default-date="[new Date(date[0]),new Date(date[1])]"
      :max-range="dateScope || null"
      />
  </div>
</template>

<script>
import {formart} from '@/utils/dateUtils.js'

export default {
  data() {
    return {
      dateType: 1,
      date: [],
      show: false,
      minDates: "",
      maxDates: ""
    }
  },
  props:{
    dateList: {
      type: Array,
      default: function () {
        return [
          {name: '自定义',value: 0},
          {name: '昨天',value: 1},
          {name: '本周',value: 2},
          {name: '本月',value: 3},
          {name: '本季度',value: 4},
        ]
      }
    },
    parentDate: { //默认日期
      type: Array,
      default: function () {
        return null
      }
    },
    minDate: {  //日期范围 (当前日期-minDate)
      type: Number,
      default: 365
    },
    dateScope: {
      type: Number,
      default: 0
    }
  },
  computed: {
    dateTypeList() {
      let typeList = this.dateList
      let today = new Date()
      //周一去除本周
      if(today.getDay() == 1) {
        typeList = typeList.filter(item => item.name != "本周")
      }
      //每月1号去除本月
      if(today.getDate() == 1) {
        typeList = typeList.filter(item => item.name != "本月")
        //季度1号去除本季度
        let month = today.getMonth()
        if(month == 0 || month == 3 || month == 6 || month == 9) {
          typeList = typeList.filter(item => item.name != "本季度")
        }
      }
      return typeList
    } 
  },
  created() {
    if(this.parentDate) {
      this.dateType = 0
      this.date = this.parentDate
    }else {
      let date = formart(new Date(new Date().setDate(new Date().getDate() - 1)));
      this.date = [date,date];
    }
    this.minDates = new Date(new Date().setDate(new Date().getDate()-this.minDate))
    this.maxDates = new Date()
  },
  methods: {
    showCalendar() {
      if(this.dateType == 0) {
        this.show = true
      }
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = [formart(start),formart(end)];
    },
    //父元素动态修改日期
    setData(date) {
      this.dateType = 0
      this.date = date
    },
    //选择日期范围(dateList)
    selectDateType() {
      let type = this.dateType
      let yesterday = formart(new Date(new Date().setDate(new Date().getDate() - 1)))
      switch(type) {
        case 1:
          this.date = [yesterday,yesterday];
          break;
        case 2:
          var weekday = new Date().getDay() || 7;
          var thisweek1 = formart(new Date(new Date().setDate(new Date().getDate() - weekday + 1)));
          this.date = [thisweek1,yesterday];
          break;
        case 3:
          var thismonth1 = formart(new Date(new Date().setDate(1)));
          this.date = [thismonth1,yesterday];
          break;
        case 4:
          var month = new Date().getMonth();
          var newmonth
          if (month < 3) {
              newmonth = new Date(new Date().setMonth(0))
          } else if (2 < month && month < 6) {
              newmonth = new Date(new Date().setMonth(3))
          } else if (5 < month && month < 9) {
              newmonth = new Date(new Date().setMonth(6))
          } else if (8 < month && month < 11) {
              newmonth = new Date(new Date().setMonth(9))
          }
          var thisseason1 = formart(new Date(newmonth.setDate(1)))
          this.date = [thisseason1,yesterday];
          break;
        default: ''
      }
      this.$emit('selectDate',this.date)
    },
    //选择日期传递给父元素
    selectDate() {
      this.$emit('selectDate',this.date)
    },
  }
}
</script>
<style lang="less" scoped>
.calendar-box{
  display: flex;
  align-items: center;
  width: 245px;
  height: 36px;
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #E6E6E6;
  box-sizing: border-box;
  padding: 0 8px;
  color: #606266;
  font-size: 14px;
  .icon-calendar{
    width: 16px;
    height: 16px;
    background: url("")
      no-repeat;
  }
  .date{
    margin: 2px 15px 0;
  }
}
.disabled{
  background-color: #F5F7FA;
  color: #C0C4CC;
}

.date-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .list-box{
    width: 81px;
    height: 36px;
    border-radius: 3px;
    /deep/ .el-input__inner{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      padding: 0 11px;
      height: 36px;
    }
    /deep/ .el-input__icon{
      line-height: 28px;
    }
  }
  .date-select{
    width: 245px;
    height: 36px;
    /deep/ .el-range-separator,/deep/ .el-range__icon{
      line-height: 28px;
    }

  }
}
</style>